<template>
  <view class="container">
    <!-- 店铺信息展示 -->
    <view class="store-info">
      <!-- 店铺图片 -->
      <view class="store-image">
        <image :src="item.imageUrl" class="store-image" />
      </view>

      <!-- 项目名称和距离 -->
      <view class="first-layer">
        <text class="item-name">{{ item.name }}</text>
        <text class="item-distance">{{ item.distance }} m</text>
      </view>

      <!-- 星级评分、评分数字和销量 -->
      <view class="second-layer">
        <view class="item-rating">
          <view v-for="star in 5" :key="star" class="star" :class="{ filled: star <= item.rating }">★</view>
        </view>
        <text class="item-rating-number">{{ item.rating }} 分</text>
        <text class="item-sales">销量: {{ item.sales }}</text>
      </view>

      <!-- 营业时间 -->
      <view class="third-layer">
        <text class="item-business-hours">{{ item.businessHours }}</text>
      </view>

      <!-- 店铺地址 -->
      <view class="fourth-layer">
        <text class="item-address">{{ item.address }}</text>
      </view>
	  <view @tap="map">
		  导航
	  </view>
    </view>

     <!-- 服务模块 -->
        <view class="service-module">
          <view class="service-title">
            <text class="service-title-text">服务项目</text>
          </view>
    
          <!-- 服务项列表 -->
          <view 
            v-for="(service, index) in services" 
            :key="index" 
            class="service-item"
            @click="toggleServiceSelection(index)"
          >
            <view class="service-left">
              <checkbox 
                :checked="service.selected" 
                :value="service.selected"
                color="#007AFF"
              />
              <view class="service-info">
                <view class="service-name-price">
                  <text class="service-name">{{ service.name }}</text>
                  <view class="price-wrapper">
                    <text class="original-price">原价: ￥{{ service.originalPrice }}</text>
                    <text class="discount-price">折扣价: ￥{{ service.discountPrice }}</text>
                  </view>
                </view>
                <view class="service-description">{{ service.description }}</view>
              </view>
            </view>
          </view>
        </view>

    <!-- 用户评价模块 -->
    <view class="review-module">
      <view class="review-title">
        <text class="review-title-text">服务评价</text>
      </view>

      <view v-for="(review, index) in visibleReviews" :key="index" class="review-item">
        <view class="review-header">
          <image :src="review.userAvatar" class="review-avatar" />
          <view class="review-user-info">
            <text class="review-user-name">{{ review.userName }}</text>
            <text class="review-date">{{ review.date }}</text>
          </view>
        </view>
        
        <view class="review-rating">
          <view v-for="star in 5" :key="star" class="star" :class="{ filled: star <= review.rating }">★</view>
        </view>
        
        <view class="review-content">
          <text>{{ review.content }}</text>
        </view>

        <view class="review-images">
          <image v-for="(img, imgIndex) in review.images" :key="imgIndex" :src="img" class="review-image" />
        </view>
      </view>

      <!-- 展示更多/收回按钮 -->
          <view class="toggle-reviews" @click="toggleReviews">
            <text>{{ showAllReviews ? '收回' : '展示更多' }}</text>
          </view>
        </view>
      
        <!-- 底部按钮 -->
        <view class="bottom-buttons">
          <button class="contact-btn" @click="contactCustomerService">联系客服</button>
          <button class="order-btn" @click="handleOrderSubmit">立即下单</button>
        </view>>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 店铺信息
const item = ref({});

// 服务项数据
const services = ref([
  {
    id: 1,
    name: '标准洗车',
    selected: false,
    originalPrice: 50,
    discountPrice: 40,
    description: '外部清洗 + 轮毂清洁',
  },
  {
    id: 2,
    name: '精洗套餐',
    selected: false,
    originalPrice: 120,
    discountPrice: 99,
    description: '内外精洗 + 打蜡护理',
  }
]);

// 用户评价数据
const evaluationList = ref([
  {
    userAvatar: 'https://example.com/avatar1.jpg',
    userName: '用户A',
    date: '2025-02-28',
    rating: 5,
    content: '服务非常好，店面干净，工作人员热情。',
    images: ['https://example.com/review1.jpg', 'https://example.com/review2.jpg']
  },
  {
    userAvatar: 'https://example.com/avatar2.jpg',
    userName: '用户B',
    date: '2025-02-27',
    rating: 4,
    content: '洗车服务不错，虽然有点小贵，但值得。',
    images: ['https://example.com/review3.jpg']
  }
]);

// 是否展示所有评论
const showAllReviews = ref(false);

// 控制显示的评论数量
const visibleReviews = computed(() => {
  return showAllReviews.value ? evaluationList.value : evaluationList.value.slice(0, 2);
});

// 展示更多/收回评论
const toggleReviews = () => {
  showAllReviews.value = !showAllReviews.value;
};


// 联系客服按钮点击事件
const contactCustomerService = () => {
  uni.makePhoneCall({
    phoneNumber: '400-123-4567'
  });
};

// 切换服务的选择状态
const toggleServiceSelection = (index) => {
  services.value[index].selected = !services.value[index].selected;
};

// 立即下单按钮点击事件
const handleOrderSubmit = () => {
  // 过滤已选服务
  const selectedServices = services.value.filter(service => service.selected);

  if (selectedServices.length === 0) {
    uni.showToast({
      title: '请至少选择一项服务',
      icon: 'none',
      duration: 2000
    });
    return;
  }

  // 构建订单数据
  const orderData = {
    shop: {
      name: item.value.name,
      address: item.value.address,
      imageUrl: item.value.imageUrl
    },
    services: selectedServices.map(service => ({
      id: service.id,
      name: service.name,
      originalPrice: service.originalPrice,
      discountPrice: service.discountPrice,
      description: service.description
    })),
    totalAmount: selectedServices.reduce((sum, service) => sum + service.discountPrice, 0)
  };

  // 将订单数据存入本地缓存
  wx.setStorageSync('orderData', orderData);

  // 跳转到订单页面
  uni.navigateTo({
    url: '/pages/carwashing/orders/orders'
  });
};

// 在页面挂载时获取传递的店铺数据
onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;

  if (options.item) {
    try {
      item.value = JSON.parse(decodeURIComponent(options.item));
    } catch (e) {
      console.error('店铺数据解析失败:', e);
    }
  }
});

const map = () =>{
	uni.navigateTo({
	    url: `/pages/carwashing/map/map?shopName=${encodeURIComponent(item.value.name)}&shopAddress=${encodeURIComponent(item.value.address)}`
	  });
}
</script>

<style scoped>
/* 保持原有样式不变 */
.container {
  padding: 10px;
}

.store-info {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.store-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 10px;
}

.first-layer {
  display: flex;
  justify-content: space-between;
}

.item-name {
  font-size: 18px;
  font-weight: bold;
}

.item-distance {
  font-size: 14px;
  color: #888;
}

.second-layer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-rating {
  display: flex;
}

.star {
  font-size: 18px;
  color: #FFD700;
}

.star.filled {
  color: #FFD700;
}

.item-rating-number {
  font-size: 14px;
  margin-left: 5px;
}

.item-sales {
  font-size: 14px;
  color: #888;
}

.third-layer, .fourth-layer {
  font-size: 14px;
  color: #333;
  margin-top: 10px;
}

.service-module {
  margin-top: 20px;
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 10px;
}

.service-item {
  margin-bottom: 15px;
}

.service-left {
  display: flex;
  align-items: center;
}

.service-info {
  margin-left: 10px;
}

.service-name {
  font-size: 16px;
  font-weight: bold;
}

.price-wrapper {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

.original-price {
  text-decoration: line-through;
  color: #888;
}

.discount-price {
  color: #FF4D4F;
  font-weight: bold;
}

.service-description {
  font-size: 14px;
  color: #333;
  margin-top: 5px;
}

.review-module {
  margin-top: 20px;
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 10px;
}

.review-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.review-item {
  margin-bottom: 20px;
}

.review-header {
  display: flex;
  align-items: center;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.review-user-info {
  display: flex;
  flex-direction: column;
}

.review-user-name {
  font-size: 16px;
  font-weight: bold;
}

.review-date {
  font-size: 14px;
  color: #888;
}

.review-rating {
  margin-top: 5px;
  display: flex;
}

.review-content {
  margin-top: 10px;
  font-size: 14px;
}

.review-images {
  margin-top: 10px;
}

.review-image {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  border-radius: 5px;
}

.toggle-reviews {
  color: #007aff;
  cursor: pointer;
}

.bottom-buttons {
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 8px 16px;
  box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
}

.contact-btn,
.order-btn {
  padding: 8px 15px;
  border-radius: 5px;
  font-size: 14px;
}

.contact-btn {
  background-color: #007aff;
  color: white;
}

.order-btn {
  background-color: #ff4d4f;
  color: white;
}
/* 评价模块样式调整 */
.review-module {
  margin-top: 20px;
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 80px; /* 增加底部间距，避免被底部按钮遮挡 */
}

/* 展示更多/收回按钮样式 */
.toggle-reviews {
  color: #007aff;
  cursor: pointer;
  text-align: center;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  margin-top: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 底部按钮样式调整 */
.bottom-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 8px 16px;
  box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
  z-index: 100; /* 确保底部按钮在最上层 */
}
</style>